<template>
    <!--底部块：友情链接列表,合作合办图标，微信二维码-->
    <footer class="ce_link">
        <div class="ce_link_footer container">
            <div class="footer_com_info">

            </div>

            <div class="row">
                <div class="footer_left el-col-14">
                    <h4>合作伙伴</h4>
                    <ul class="footer_cooperation">
                        <li v-for="(item,index) in linkLogo" :key="index">
                            <a @click="toLink(item.url)" class="ce_icon ">
                                <img :src="item.logo" />
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-right el-col-10">
                    <div class="footer-right-desc" v-for="(item,index) in linkAPP" :key="index">
                        <span v-if="!item.name" class="verticalFont">上传微信二维码</span>
                        <span v-if="item.name" class="verticalFont">{{item.name}}</span>
                        <img v-if="!item.logo" class="img-responsive center-block" src="../../../public/base/imgs/wechat_code.png" alt="...">
                        <img v-if="item.logo" class="img-responsive center-block" :src="item.logo" alt="...">
                    </div>
                </div>
            </div>


            <div class="footerLine"></div>
            <div class="footer_records">
                亚盟电商平台官网 2021@ www.yameng.shop TECH BY @cevent 备案号：冀ICP备18888888号-8
            </div>
        </div>
    </footer>
</template>

<script>
    export default {
        name: "MainFooter",
        data() {
            return {
                message: "首页尾部",
                linkLogo:[],
                linkAPP:[],
            }
        },
        mounted() {
            this.getSiteLink();
        },
        methods:{
            getSiteLink(){
                let loading=this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER+'/system/client/sitelink/list').then((response)=>{
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    },300);
                    this.fullscreenLoading=true;
                    let resp=response.data;
                    this.fullscreenLoading=false;
                    if(resp.success){
                        for(let i=0;i<resp.responseData.length;i++){
                            if(resp.responseData[i].linkType.indexOf("C")!==-1){
                                this.linkLogo.push(resp.responseData[i]);
                            }
                            if(resp.responseData[i].linkType.indexOf("A")!==-1){
                                this.linkAPP.push(resp.responseData[i]);
                            }
                        }
                    }
                });
            },
            toLink(url){
                let a=document.createElement("a");
                a.setAttribute("href",url);
                a.setAttribute("target","_blank");//跳转新页面
                a.click();
            },
        }
    }
</script>

<style scoped>
    .ce_link {
        background-color: #eee;
        padding: 20px;
    }

    .ce_link .ce_link_footer {
        text-align: center;
    }

    .ce_link .ce_link_footer h4 {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .ce_link .ce_link_footer .footer_com_info {

    }

    .ce_link .ce_link_footer .footer_left .footer_cooperation {
        list-style: none;
        /*块级元素居中*/
        /*margin: 0 auto;*/
        display: inline-block;
        margin-bottom: 0;
    }

    .ce_link .ce_link_footer .footer_cooperation li {
        float: left;
        margin-left: 20px;
    }
    .ce_link .ce_link_footer .footer_cooperation li a{
        text-decoration: none;
    }

    .ce_icon {
        font-size: 40px;
        color: #bbb;
    }
    .ce_icon img{
        width: 36px;
        cursor: pointer;
    }

    .ce_link .ce_link_footer .footer_records {
        color: #9d9d9d;
    }

    .footerLine {
        display: inline-block;
        width: 100%;
        height: 2px;
        color: white;
        border-bottom: 1px solid #bbb;
        background-color: unset;
    }

    .footer-right{

        text-align: center;
    }
    .footer-right .footer-right-desc{
        float: left;
    }
    .footer-right .footer-right-desc .verticalFont{
        width: 20px;
        line-height: 40px;
        border: 1px dashed #ffffff;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        float: left;
    }
    /*底部二维码*/
    .footer-right img {
        max-width: 90px;
        margin-right: 20px;
        margin-bottom: 5px;
    }

</style>